<template>
  <b-container class="page-home text-md-left my-3">
    <b-row>
      <h3 class="animated bounceInLeft">{{ title }}</h3>
    </b-row>
    <b-row class="my-md-3 animated bounceInLeft" v-if="$store.state.isLogin">
      <b-button to="/editor" variant="outline-primary">发表主题</b-button>
    </b-row>
    <b-row class="animated bounceInRight">
      <b-col col lg="12" md="6" sm="12" v-for="(data,index) in datas" :key="index">
        <b-card
            img-src="https://gitee.com/LeoSora/pic-go/raw/master/img/Kinoko_Nasu.png"
            img-alt="Image"
            img-width="120rem"
            img-left
            class="my-3">
          <b-card-text>
            <b-link @click="jump(data.id,data.title)">
              <b>{{ data.title }}</b>
            </b-link>
          </b-card-text>
          <b-card-text>
            帖子数：{{ data.commentCount }}<a style="margin-left: 15px">点赞数：{{data.likeCount}}</a>
            <br> 最后更新时间：{{data.lastUpdate}}
          </b-card-text>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import axios from "axios";
// import moment from "moment";

export default {
  name: "Topics",

  data() {
    return {
      CategroyID: this.$route.query.category,
      title: this.$route.query.title,
      datas: []
    }
  },
  created() {
    axios
        .get("/dev_api/topics?categoryId=" + this.CategroyID)
        .then(response => {
          if (response.data.code === 200) {
            console.log(response.data)
            this.datas = response.data.data
            // console.log(JSON.stringify(this.datas))
          } else {
            console.log("请求错误")
          }
        })
        .catch(error => {
          console.log(error)
        });
  },
  methods: {
    jump(id, title) {
      console.log("传入", id)
      this.$router.push({name: "topic", query: {topicId: id, title: title}})
    }
  }
}
</script>

<style scoped>

</style>